<template>
    <div class="breadcurmb-box">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">home</el-breadcrumb-item>
            <el-breadcrumb-item :to="item" v-for="item in breadcrumb" :key="item.fullpath">{{ item.meta.title }}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>

<script lang="ts" >
import { defineComponent, getCurrentInstance, ref, Ref, watch } from 'vue';
export default defineComponent({
    name: 'Breadcrumb',
    setup() {
        const instance: any = getCurrentInstance();
        const GL = instance.appContext.config.globalProperties;
        const breadcrumb: Ref<any[]> = ref([]);
        const str = sessionStorage.getItem('bread') || '';
        breadcrumb.value = str ? JSON.parse(str) : [GL.$route];
        watch(
            () => GL.$route,
            (to) => {
                const index = breadcrumb.value.findIndex((item: any) => {
                    return item.fullPath === to.fullPath;
                });
                if (index !== -1) {
                    breadcrumb.value = breadcrumb.value.slice(0, index + 1);
                } else if (to.meta.more) {
                    breadcrumb.value.push(to);
                } else {
                    breadcrumb.value = [to];
                }
                const mask = breadcrumb.value.map((item: any) => {
                    if(item.meta.more ) {
                        item.meta.title = (item.query.ServiceID ? '编辑' : '新增') + item.meta.title
                    }
                    return {
                        fullPath: item.fullPath,
                        path: item.path,
                        hash: item.hash,
                        name: item.name,
                        params: item.params,
                        query: item.query,
                        meta: item.meta
                    };
                });
                sessionStorage.setItem('bread', JSON.stringify(mask));
            }
        );
        return {
            breadcrumb
        };
    }
});
</script>

<style lang="scss" scoped>
@import 'index.scss';
</style>
